<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="author" content="lijinbo" />
    <meta name="cdnload" content="vue,element-ui-js,element-ui-css,echarts" />
    <title>242-贷款计算器</title>
  </head>

  <body>
    <div id="app">
      <el-form inline>
        <el-form-item label="金额（万元）">
          <el-input-number v-model="formData.total" :step="1" :min="1"></el-input-number>
        </el-form-item>
        <el-form-item label="利率（%）">
          <el-input-number v-model="formData.rate" :precision="2" :step="0.1" :max="10"></el-input-number>
        </el-form-item>
        <el-form-item label="贷款年限">
          <el-select v-model="formData.year" placeholder="请选择贷款年限">
            <el-option v-for="item in yearList" :key="item.value" :label="item.label" :value="item.value"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="还款方式">
          <el-radio-group v-model="formData.paymentMethod">
            <el-radio :label="0">等额本息</el-radio>
            <el-radio :label="1">等额本金</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">计算</el-button>
        </el-form-item>
      </el-form>
      <el-descriptions title="还款信息">
        <el-descriptions-item label="还款总额">{{ hkze }}</el-descriptions-item>
        <el-descriptions-item label="利息总额">{{ lxze }}</el-descriptions-item>
        <el-descriptions-item label="每月递减">{{ mydj }}</el-descriptions-item>
      </el-descriptions>
      <el-tabs v-model="activeName" type="card">
        <el-tab-pane label="月视图" name="m">
          <el-table :data="showTableData" height="500" border stripe>
            <el-table-column type="index" width="50" label="期数"></el-table-column>
            <el-table-column prop="bx" label="每月还款"></el-table-column>
            <el-table-column prop="ljBx" label="累计还款"></el-table-column>
            <el-table-column prop="lx" label="每月利息"></el-table-column>
            <el-table-column prop="ljLx" label="累计利息"></el-table-column>
            <el-table-column prop="bj" label="每月本金"></el-table-column>
            <el-table-column prop="ljBj" label="累计本金"></el-table-column>
            <el-table-column prop="syBj" label="剩余本金"></el-table-column>
            <el-table-column label="提前还款">
              <template slot-scope="{ row, $index }">
                <el-button v-if="$index >= 12" size="mini" @click="handlePreRepayment(row, $index)">提前还款</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="年视图" name="y">
          <el-table :data="showYearTableData" height="500" border stripe>
            <el-table-column type="index" width="50" label="年"></el-table-column>
            <el-table-column prop="bx" label="每年还款"></el-table-column>
            <el-table-column prop="ljBx" label="累计还款"></el-table-column>
            <el-table-column prop="lx" label="每年利息"></el-table-column>
            <el-table-column prop="ljLx" label="累计利息"></el-table-column>
            <el-table-column prop="bj" label="每年本金"></el-table-column>
            <el-table-column prop="ljBj" label="累计本金"></el-table-column>
            <el-table-column prop="syBj" label="剩余本金"></el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
      <el-button size="mini" @click="showComparisonChart">年度还款本金利息对比图</el-button>
      <el-dialog title="本金利息对比图" :visible.sync="chartDialog" width="1200px" :close-on-click-modal="false">
        <div id="echartsContainer" style="width: 100%; height: 500px"></div>
        <span slot="footer">
          <el-button type="primary" @click="chartDialog = false">确 定</el-button>
        </span>
      </el-dialog>

      <el-dialog title="提前还款费用详情" :visible.sync="dialogVisible" width="600px" :close-on-click-modal="false">
        <el-descriptions title="详细信息">
          <el-descriptions-item label="贷款总额">{{ formData.total }} 万元</el-descriptions-item>
          <el-descriptions-item label="已还期数">{{ preRepaymentIndex }}</el-descriptions-item>
          <el-descriptions-item label="未还期数">{{ showTableData.length - preRepaymentIndex }}</el-descriptions-item>
          <el-descriptions-item label="已还总额">{{ preRepayment.ljBx }}</el-descriptions-item>
          <el-descriptions-item label="已还本金">{{ preRepayment.ljBj }}</el-descriptions-item>
          <el-descriptions-item label="已还利息">{{ preRepayment.ljLx }}</el-descriptions-item>
          <el-descriptions-item label="未还本金">{{ preRepayment.syBj }}</el-descriptions-item>
        </el-descriptions>
        <p>此时提前还款需向银行补交剩余本金：{{ preRepayment.syBj }}</p>
        <p>如果提前还款此次贷款总共消费：{{ preRepayment.spend }}</p>
        <p>不提前还款总共消费：{{ hkze }}，提前还款可以节省：{{ (hkze - preRepayment.spend).toFixed(2) }}</p>
        <span slot="footer">
          <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
        </span>
      </el-dialog>
    </div>
    <script src="./242-main.js"></script>
  </body>
</html>
